<!DOCTYPE html>
<html>
<head>
    <title>骡窝商城</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/shop.css"/>
    <link rel="stylesheet" href="/js/plugins/dialog/dialog.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap/js/bootstrap.min.js"></script>
    <script src="/js/plugins/dialog/dialog.min.js"></script>
    <script src="/js/plugins/jrender/jrender.js"></script>
    <script src="/js/common.js"></script>
    <script>
        var tags = [];// 记录当前标签页信息(当前页/总页数 )
        var currentTab; // 当前查看的标签页信息
        //创建一个选项卡的方法
        function createTab(index, obj) {
            /*<li class="nav-item" data-index="xx">
            <a data-tid="xx" class="nav-link" id="pills-xx-tab" data-toggle="pill" href="#pills-xx">oo</a>
                    </li>*/
            var a = $("<a class='nav-link' data-toggle='pill'></a>").attr("data-tid", obj.id)
                .attr("id", "pills-" + obj.id + "-tab").attr("href", "#pills-" + obj.id).html(obj.name);
            return $("<li class='nav-item'></li>").attr("data-index", index).append(a);
        }

        // 判断当前页面是否到达底部
        function isEnd() {
            return $(window).scrollTop() + $(window).height() >= $(document).height();
        }

        $(function () {
            jQuery.ajaxSettings.traditional = true;// ids[]:11  jquery的序列化问题
            // 获取本地缓存
            var user = JSON.parse(sessionStorage.getItem("user"));
            // 获取我的积分
            var integral;
            $.get("/signins/" + user.id + "/state", function (data) {
                integral = data.integral;
                if (!integral) {
                    $("#integral").html(0);
                } else {
                    $("#integral").html(data.integral);
                }
            });
            // 查询积分最高的商品
            $.get("/goods/expensive", function (data) {
                $(".expensive").renderValues(data, {
                    handle: function (ele, value) {
                        ele.href = "/mine/goodsdetail.html?id=" + value;
                    }
                });
            });

            // 查询所有商品
            $.get("/goods", function (data) {
                $(".goods").renderValues({list: data}, {
                    handle: function (ele, value) {
                        ele.href = "/mine/goodsdetail.html?id=" + value;
                    }
                });
            });
            // 渲染选项卡, 查询所有类型
            $.get("/goodstypes", function (data) {
                $.each(data, function (index, ele) {
                    var tab = createTab(index, ele);
                    tab.appendTo("#pills-tab");
                    // 同步查询对应标签页的内容
                    $.get("/goods/" + ele.id, function (data) {
                        $(data).appendTo("#pills-tabContent");
                        // 为每一个标签页存入信息
                        tags[index] = {id: ele.id, currentPage: 1, pages: $(data).data("pages")};
                    }, "html");
                });
            });

            // 选项卡动态绑定事件
            $("#pills-tab").on("click", "a[data-tid]", function () {
                // 获取当前标签页信息, 从a标签的父元素li中取自定义index的属性值
                var index = $(this).closest("li").data("index");
                currentTab = tags[index];
            });

            // 设置滚动事件
            $(window).scroll(function () {
                if (isEnd()) {
                    if (currentTab) {
                        if (currentTab.currentPage < currentTab.pages) {
                            currentTab.currentPage++;
                            $.get("/regions/" + currentTab.id + "/strategies", {currentPage: currentTab.currentPage}, function (data) {
                                $(data).appendTo($("#pills-" + currentTab.id + " .classify"));
                            }, "html");
                        } else {
                            $(document).dialog({
                                type: 'notice',
                                infoText: '已经到底部了',
                                autoClose: 1000,
                                position: 'bottom'  // center: 居中; bottom: 底部
                            });
                        }
                    }
                }
            });

            // 我的购物车
            $("#myCar").click(function () {
                var sum = 0;// 总计
                // 发送ajax请求,查询, 购物车订单
                $.get("/orders/" + user.id, {state: 1}, function (data) {
                    var ids = $.map(data, function (ele, index) {
                        sum += ele.totalIntegral;
                        $("#sum").html("总计: " + sum + "积分");
                        return ele.id;
                    });
                    $("#myShopCar").renderValues({list: data}, {
                        handle: function (ele, value) {
                            $(ele).attr("data-oid", value);
                        }
                    });
                    // 发送ajax请求, 删除订单
                    $(".orderMsg").on("click", ".deleteBtn", function () {
                        var oid = $(".deleteBtn").data("oid");
                        console.log(oid);
                        $.ajax({
                            type: "DELETE",
                            url: "/orders/" + oid,
                            success: function () {
                                window.location.reload();
                            }
                        })
                    });
                    if (sum != 0) {
                        // 结算按钮
                        $(".settlement").click(function () {
                            $.post("/orders/updateBatch", {
                                ids: ids,
                                state: 2,
                                totalIntegral: sum,
                                userId: user.id
                            }, function (data) {
                                if (data.success) {
                                    $(document).dialog({
                                        autoClose: 2500,
                                        content: '结算成功, 本次消耗' + sum + '积分',
                                        buttons: [
                                            {
                                                callback: function () {
                                                    window.location.reload();
                                                }
                                            }]
                                    });
                                } else {
                                    if (integral) {
                                        $(document).dialog({
                                            autoClose: 2500,
                                            content: data.msg
                                        });
                                    } else {
                                        $(document).dialog({
                                            autoClose: 2500,
                                            content: '抱歉,您的积分不足'
                                        });
                                    }
                                }
                            })
                        })
                    } else {
                        $(document).on('click', '.settlement', function () {
                            $(document).dialog({
                                content: '请选择商品'
                            });
                        });
                    }
                });
                $("#shopcar").modal("show");
            });
        });
    </script>
</head>

<body>
<div class="search-head">
    <div class="row nav-search">
        <div class="col">
            <a href="profiles.html">
                <span><i class="fa fa-chevron-left"></i></span>
            </a>
        </div>
        <div class="col">
            <span>积分商城</span>
        </div>
        <div class="col">
            <span>我的积分:&nbsp;&nbsp;<b id="integral"></b></span>
        </div>
    </div>
</div>

<ul class="nav nav-pills nav-justified border border-left-0 border-top-0 border-right-0" id="pills-tab" role="tablist">
    <li class="nav-item">
        <a class="nav-link active show" id="pills-top-tab" data-toggle="pill" href="#pills-top">
            <span style="font-weight: bold;">推荐</span>
        </a>
    </li>
</ul>

<div class="tab-content" id="pills-tabContent">
    <!--标签页内容-->
    <div class="tab-pane fade active show" id="pills-top">
        <div class="container expensive">
            <a render-key="id" render-fun="handle">
                <p align="center"><b>今日最贵</b></p>
                <img render-src="coverUrl" width="100%">
            </a>
        </div>
        <hr>
        <div class="container goods">
            <h6>全部商品</h6>
            <div class="row hot" render-loop="list">
                <div class="col-4">
                    <a render-key="list.id" render-fun="handle">
                        <img render-src="list.coverUrl">
                        <p render-html="list.name"></p>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="operation">
    <button class="btn" id="myCar"><a role="button" href="#">我的购物车</a></button>
</div>
<div class="modal fade" id="shopcar" role="dialog" aria-labelledby="gridSystemModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="gridSystemModalLabel">购物车</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="container-fluid" id="myShopCar">
                    <div class="row" render-loop="list">
                        <div class="col-sm-12 orderMsg">
                            <img style="float: left" render-src="list.goodsCoverUrl" width="50px">
                            <p><b render-html="list.goodsName"></b>&nbsp;&nbsp;&nbsp;&nbsp;<b
                                    render-html="list.totalIntegral"></b>积分</p>
                            <button style="float: right" type="button" class="btn btn-danger deleteBtn"
                                    render-key="list.id"
                                    render-fun="handle">
                                删除
                            </button>
                            <br/>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <div><b class="text-success" id="sum"></b></div>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary settlement">结算</button>
            </div>
        </div>
    </div>
</div>
</body>
</html>